<template>
	<view class="container">
		<view class="top">
			<u-icon @click="return_btn" name="arrow-left" color="#fff" size="30"></u-icon>
			<u--text text="经营统计" align="center" color="#fff" size="22" margin="4vh 0 0 0"></u--text>
		</view>
		<view class="bgtop"></view>
		<view class="card">
			<view class="head">
				<view class="card-1">
					今日
				</view>
				<view class="card-2">
					昨日
				</view>
				<!-- @click="toggleShow" -->
				<view class="card-3" @click="show=true">
					<u-icon name="calendar" size="30" label="自定义"></u-icon>
					<view class="choosetime" v-if="show">
						<u--text @click="sendlog()" text="一周内" size="13" align="center" lineHeight="50rpx"></u--text>
						<u--text text="一个月内" size="13" align="center" lineHeight="50rpx"></u--text>
						<u--text text="三个月内" size="13" align="center" lineHeight="50rpx"></u--text>
						<u--text text="半年内" size="13" align="center" lineHeight="50rpx"></u--text>
						<u--text text="一年内" size="13" align="center" lineHeight="50rpx"></u--text>
					</view>
				</view>
				<view v-if="show" class="overlay" @click="show=false"></view>
			</view>
			<view class="hr"></view>

			<view class="body">
				<view class="card-4">
					<view>
						<view class="img1">
							<image src="../../../static/images/wpc/shouru.png"></image>
						</view>
						<view class="tinfo">
							<u--text align="center" lineHeight="80rpx" size="18" text="￥2066.56"></u--text>
						</view>
						<view class="tinfo">
							<u--text align="center" lineHeight="30rpx" text="收入"></u--text>
						</view>
					</view>
				</view>
				<view class="card-4">
					<view>
						<view class="img2">
							<image src="../../../static/images/wpc/dingdan.png"></image>
						</view>
						<view class="tinfo">
							<u--text align="center" lineHeight="80rpx" size="18" text="0724"></u--text>
						</view>
						<view class="tinfo">
							<u--text align="center" lineHeight="30rpx" text="订单数"></u--text>
						</view>
					</view>
				</view>
			</view>


		</view>

		<view class="card">
			<view class="head1">
				收入分布
			</view>
			<view class="hr"></view>
			<view class="yuanhuan">
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" canvasId="myRingChart" />
				</view>
			</view>
		</view>

		<view class="card" style="height: 800rpx;">
			<view class="head1">
				订单分布
			</view>
			<view class="hr"></view>
			<view class="zhuzhuangtu">
				<view class="charts-box1">
					<qiun-data-charts type="mount" :opts="opts1" :chartData="chartData1" canvasId="myColumnChart" />
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				chartData1: {
					// categories: ['维修', '保养', '洗车'],
					series: [{
						data: [{
							"name": "维修",
							"value": 82
						}, {
							"name": "保养",
							"value": 63
						}, {
							"name": "洗车",
							"value": 86
						}, ]
					}],
				},
				opts1: {
					color: ['#fd7aa4', '#947fff', '#5cdbd3'],
					extra: {
						mount: {
							type: "bar",
							widthRatio: 0.4
						}
					}
				},

				chartData: {
					categories: ['洗车', '保养'],
					series: [{
							name: '洗车',
							data: 500,
						},
						{
							name: '保养',
							data: 1566.56,
						},
					],
				},
				opts: {
					color: ['#fd7aa4', '#947fff'], // 设置颜色
					title: {
						name: ''
					},
					subtitle: {
						name: ''
					}
				},

			};
		},

		methods: {
			// toggleShow() {
			// 	this.show = !this.show;
			// }
			sendlog() {
				console.log("111")
			},
			return_btn() {
				uni.$u.route('/pages/lzx/business/homePage');
			}
		},
	};
</script>
<style lang="scss">
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		opacity: 1;
	}

	.choosetime {
		position: absolute;
		width: 160rpx;
		height: 250rpx;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		z-index: 7;
	}


	.bgtop {
		width: 100vw;
		background-color: #3183fc;
		height: 300rpx;
		overflow: auto;
	}

	.top {
		z-index: 3;
		width: 100vw;
		background-color: #3183fc;
		height: 150rpx;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.card {
		width: 95%;
		box-sizing: border-box;
		height: 600rpx;
		margin: 10px auto;
		position: relative;
		bottom: 150rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		padding: 30rpx 25rpx;

		.card-1 {
			width: 150rpx;
			height: 60rpx;
			background-color: #2f81fa;
			color: #fff;
			border-radius: 30rpx 0 0 30rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 60rpx;


		}

		.card-2 {
			width: 150rpx;
			height: 60rpx;
			background-color: #f2f2f2;
			color: #2f81fa;
			border-radius: 0 30rpx 30rpx 0;
			font-size: 30rpx;
			line-height: 60rpx;
			text-align: center;
		}

		.card-3 {
			width: 200rpx;
			height: 60rpx;
			position: absolute;
			right: -20rpx;
		}

		.head {
			display: flex;
			justify-content: center;
		}

		.hr {
			margin-top: 30rpx;
			border: 2px solid #f3f3f3;
			border-radius: 2px;
		}

		.body {
			display: flex;
			justify-content: space-evenly;
			margin-top: 80rpx;
			align-items: center;
			/* 垂直居中 */



		}

		.card-4 {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
			width: 220rpx;
			height: 250rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
		}

		.card-4 .img1 {
			width: 80rpx;
			height: 80rpx;
			background-color: red;
			// margin-left: 30rpx;
			display: flex;
			margin: 0 auto;
			/* 使用Flexbox布局 */
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			border-radius: 20rpx;

		}

		.card-4 .img2 {
			width: 80rpx;
			height: 80rpx;
			background-color: #479bff;
			// margin-left: 30rpx;
			display: flex;
			margin: 0 auto;
			/* 使用Flexbox布局 */
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			border-radius: 20rpx;

		}

		.card-4 image {
			width: 40rpx;
			height: 40rpx;
		}

		.head1 {
			font-size: 35rpx;
			font-weight: bold;
		}

		.yuanhuan {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 400rpx;
			/* 调整高度以适应圆环大小 */
		}

		.charts-box {
			width: 100%;
			height: 100%;
		}

		.qiun-charts {
			width: 100%;
			height: 100%;
		}

		.charts-box1 {
			width: 100%;
			height: 600rpx;
			/* 确保有足够的高度 */
		}

	}
</style>